<template>
  <div class="main">
    <!-- 活动列表 -->
    <div class="activeTab">
      <van-tabs
        :active="active"
        :border="false"
        line-width="24"
        color="#187798"
        sticky
        @change="tabChange"
      >
        <van-tab :title="item" @name="item" v-for="(item,i) in tabList" :key="i">
          <!-- 有活动 -->
          <div class="hotList" v-if="myActive.length > 0">
            <ul>
              <li
                v-for="(item,index) of myActive"
                class="onlyLi"
                :key="index"
                @click="goApplyDetail(item.id)"
              >
                <div class="imgShow">
                  <img :src="item.pic+'?x-oss-process=image/resize,w_270,h_270'" class="newsPic" />
                  <div class="activeStatus">
                    <img
                      v-if="item.activityStatus === 'NOT_START'"
                      src="/static/images/index/unstart.png"
                      alt
                    />
                    <img
                      v-if="item.activityStatus === 'ON_REGISTER'"
                      src="/static/images/index/applying.png"
                      alt
                    />
                    <img
                      v-if="item.activityStatus === 'REGISTER_END'"
                      src="/static/images/index/over.png"
                      alt
                    />
                    <img
                      v-if="item.activityStatus === 'ACTIVITY_END'"
                      src="/static/images/index/over.png"
                      alt
                    />
                    <img
                      v-if="item.activityStatus === 'ONGOING'"
                      src="/static/images/index/ing.png"
                      alt
                    />
                    <span>{{item.activityStatus==='NOT_START'?'未开始':item.activityStatus==='ON_REGISTER'?"报名中":item.activityStatus==='REGISTER_END'?"报名结束":item.activityStatus==='ONGOING'?"进行中":"活动结束"}}</span>
                  </div>
                </div>
                <div class="newsInfor">
                  <p>{{item.name}}</p>
                  <span>报名日期：{{item.registerStartTime}}至{{item.registerEndTime}}</span>
                </div>
              </li>
            </ul>
          </div>
          <!-- 无活动-->
          <div class="empty" v-if="!loadMore && myActive.length===0">
            <div style="text-align:center">
              <img class="emptyIcon" src="/static/images/user/active_icon.png" alt />
              <p class="emptyText">您当前暂无活动</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <div>
        <div class="activeMore" v-if="myActive.length>0 && !loadMore">—— 已经到底啦 ——</div>
      </div>
    </div>
  </div>
</template>

<script>
import { myActive } from '@/api/api';
export default {
  props: {},
  data () {
    return {
      tabList: ['全部', '报名中', '报名结束', '进行中', '活动结束'],
      currentIndex: 0,
      active: 0,
      activeIndex: 0,
      // 活动列表
      myActive: [],
      // 列表分页
      pages: {
        pageIndex: 1,
        pageSize: 10
      },
      loadMore: true
    };
  },
  computed: {},
  created () {},
  mounted () {
    this.pages.pageIndex = 1;
    this.myActive = [];
    this.loadMore = true;
    this.getMyActive(this.pages);
  },
  watch: {},
  // 上拉加载更多
  onReachBottom () {
    this.getMyActive(this.pages);
  },
  onShow () {
    // 点击tabbar下的列表详情返回时还在原标签
    this.active = this.activeIndex;
  },
  methods: {
    // 获取活动列表
    async getMyActive (data) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      if (this.loadMore) {
        await myActive(data).then(res => {
          console.log('myActive', res.list);
          res.list.map(item => {
            item.registerStartTime = item.registerStartTime.substring(0, 10);
            item.registerEndTime = item.registerEndTime.substring(0, 10);
          });
          this.myActive = this.myActive.concat(res.list);
          ++this.pages.pageIndex;
          if (res.pages < this.pages.pageIndex) {
            this.loadMore = false;
          }
        });
      }
      wx.hideLoading();
    },
    // tabList切换
    tabChange (event) {
      // 活动状态：NOT_START.未开始,ON_REGISTER.报名中,REGISTER_END.报名结束,ONGOING.进行中,ACTIVITY_END.活动结束
      this.activeIndex = event.target.index;
      if (this.activeIndex === 0) {
        delete this.pages.status;
      }
      if (this.activeIndex === 1) {
        this.pages.status = 'ON_REGISTER';
      }
      if (this.activeIndex === 2) {
        this.pages.status = 'REGISTER_END';
      }
      if (this.activeIndex === 3) {
        this.pages.status = 'ONGOING';
      }
      if (this.activeIndex === 4) {
        this.pages.status = 'ACTIVITY_END';
      }
      // if (this.activeIndex === 5) {
      //   this.pages.status = 'ACTIVITY_END';
      // }
      this.pages.pageIndex = 1;
      this.myActive = [];
      this.loadMore = true;
      this.getMyActive(this.pages);
      console.log('tabList切换', event.target);
    },
    // 跳转到报名详情页面
    goApplyDetail (id) {
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/active/applyDetail/main?classifyId=${id}`
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.main {
  background: #f7f7f6ff;
  // 活动版块
  .activeTab {
    // padding-top: 15px;
    height: 44px;
    width: 100%;
    background: #fff;
    z-index: 1;
    box-shadow: 0 0 20px 0 rgba(2, 6, 4, 0.06);
  }
  .activeTab /deep/ .van-tab--active .van-ellipsis {
    // font-size: 13px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFangSC;
    letter-spacing: 3px;
    font-weight: 700;
    line-height: 25px;
    color: rgba(24, 119, 152, 1);
    text-overflow: clip;
  }
  .activeTab /deep/ .van-ellipsis {
    overflow: visible;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    letter-spacing: 3px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    line-height: 25px;
    color: rgba(144, 146, 146, 1);
  }
  .activeTab /deep/ .van-tabs__line {
    bottom: 0;
    left: 0;
    width: 26px !important;
    text-align: center !important;
    z-index: 1;
    height: 4px;
    background-color: #187798ff;
    border-radius: 3px;
  }
  .van-tabs__wrap /deep/ {
    box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  }
  .hotList {
    padding: 0 15px;
    ul {
      padding-top: 16px;
      display: flex;
      flex-direction: column;
      li {
        background-color: #fff;
        display: flex;
        .imgShow {
          width: 90px;
          height: 90px;
          position: relative;
          margin-right: 15px;
          .newsPic {
            width: 100%;
            height: 100%;
          }
          .activeStatus {
            width: 58px;
            height: 20px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
            span {
              font-size: 10px;
              font-family: PingFangSC-Medium, PingFangSC;
              font-weight: 700;
              color: rgba(255, 255, 255, 1);
              line-height: 14px;
              position: absolute;
              left: 0;
              top: 3px;
              right: 0;
              margin: 0 auto;
              text-indent: -10px;
            }
          }
        }
        .newsInfor {
          width: 240px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          p {
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 700;
            color: rgba(2, 6, 4, 1);
            line-height: 21px;
            -webkit-line-clamp: 2;
          }
          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFangSC;
            font-weight: 400;
            color: rgba(144, 146, 146, 1);
            line-height: 17px;
          }
        }
      }
      .li {
        margin-bottom: 15px;
        background-color: #fff;
        display: flex;
      }
      .onlyLi {
        margin-bottom: 15px;
      }
    }
  }
  .activeMore {
    height: 74px;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFangSC;
    font-weight: 700;
    color: #b8bab9;
    line-height: 74px;
    text-align: center;
    // padding-top: 5px;
  }
}
.empty {
  margin-top: 90px;
  .emptyText {
    margin-top: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
    line-height: 20px;
  }
}
</style>
